<script setup lang="ts">
import { Bottom, Top } from '@element-plus/icons-vue'
import type { WorkbenchCard } from '@/mixins/MixinWorkbench'
import { STORAGE_MODES } from '@/enum/modules/indicator'

const props = defineProps<{
  timeType: STORAGE_MODES
  data: WorkbenchCard[]
}>()
const active = defineModel<string>({ required: true })
const timeText = computed(() => {
  const t = props.timeType
  if (t === STORAGE_MODES.MONTH) {
    return ['本月', '上月', '上上月']
  }
  if (t === STORAGE_MODES.YEAR) {
    return ['今年', '去年', '前年']
  }
  return ['今日', '昨日', '前日']
})
const yoyText = computed(() => {
  const t = props.timeType
  if (t === STORAGE_MODES.MONTH) {
    return '同比去年上月'
  }
  if (t === STORAGE_MODES.YEAR) {
    return '去年同比前年'
  }
  return '同比去年昨日'
})
const momText = computed(() => {
  const t = props.timeType
  if (t === STORAGE_MODES.MONTH) {
    return '上月环比上上月'
  }
  if (t === STORAGE_MODES.YEAR) {
    return ''
  }
  return '昨日环比前日'
})
</script>

<template>
  <div class="roll energy-overview">
    <div class="items-wrapper flex flex-nowrap gap-sm">
      <div
        v-for="(item, index) in data" :key="index"
        class="padding-sm fs-14 energy-item flex-1 cursor-pointer border rounded-sm"
        style="line-height: 1.5;"
        :class="{ active: item.name === active }"
        @click="active = item.name"
      >
        <h3 class="margin-top-0 margin-bottom-xs">
          {{ item.name || '-' }}
        </h3>
        <div class="fs-20 flex items-center">
          {{ item.now == null ? '-' : item.now }}
          <ElTag type="primary" class="ml-auto">
            {{ timeText[0] }}
          </ElTag>
        </div>
        <div class="fs-20 flex items-center">
          {{ item.previous == null ? '-' : item.previous }}
          <ElTag type="success" class="ml-auto">
            {{ timeText[1] }}
          </ElTag>
        </div>
        <div class="fs-20 flex items-center">
          {{ item.beforePrevious == null ? '-' : item.beforePrevious }}
          <ElTag type="warning" class="ml-auto">
            {{ timeText[2] }}
          </ElTag>
        </div>
        <ElDivider border-style="dashed" style="margin: 16px 0;" />
        <div class="text-placeholder flex items-center">
          {{ yoyText }}：<strong
            class="ml-auto" :class="{
              'color-green': item.yoy <= 0,
              'color-red': item.yoy > 0,
            }"
          >{{ item.yoy > 0 ? '+' : '' }}{{ item.yoy == null ? '-' : item.yoy }}% <ElIcon v-if="item.yoy != null && item.yoy !== 0"><component :is="item.yoy > 0 ? Top : Bottom" /></ElIcon></strong>
        </div>
        <div v-if="momText" class="text-placeholder flex items-center" style="margin-top: 5px;">
          {{ momText }}：<strong
            class="ml-auto" :class="{
              'color-green': item.mom <= 0,
              'color-red': item.mom > 0,
            }"
          >{{ item.yoy > 0 ? '+' : '' }}{{ item.mom == null ? '-' : item.mom }}%<ElIcon v-if="item.mom != null && item.mom !== 0"><component :is="item.mom > 0 ? Top : Bottom" /></ElIcon></strong>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.energy-item {
  transition: all .3s;
  .color-green {
    color: var(--el-color-success);
  }
  .color-red {
    color: var(--el-color-danger);
  }
  small {
    color: var(--el-text-color-secondary);
  }
  :deep(.el-tag) {
    opacity: 0.8;
  }
  &.active {
    background-color: var(--el-bg-color-page);
  }
}
</style>
